<template>
	<div class="head_mian-box">
		<div class="head_mian" :style="'height:' + customBar + 'px;'">
			<div v-if="!isFixed">
				<div class="head_bg" :style="config ? headFixedStyle : headScrollStyle" v-if="scrollTop">
					<div @click="goBack" class="head_back" :style="navigateStyle">
						<van-icon size="22" name="arrow-left" class="head_back_icon" v-if="isBack" />
						<span>{{ headTitle }}</span>
					</div>
				</div>
				<div class="head_top_mian" v-else>
					<div class="head_top" v-if="isBack">
						<van-icon @click="goBack" size="22" name="arrow-left" />
						<!-- <van-icon
              @click="goHome"
              size="20"
              name="wap-home-o"
            /> -->
					</div>
					<!-- <div :style="navigateStyle">{{headTitle}}</div> -->
				</div>
			</div>
			<div v-else class="head_fixed" :style="headFixedStyle">
				<!-- <div
          class="head_fixed_left"
          v-if="config && !config.backgroundImage"
        >
          <img
            src="https://wwk.oss-cn-hangzhou.aliyuncs.com/wwk/90cb58d0c6b44e768d91e1abfe7de727.jpg"
            alt=""
          >
        </div> -->
				<div class="head_fixed_title" :style="navigateStyle">
					{{ headTitle }}
				</div>
				<div v-if="isBack" @click="goBack" class="head_back_left" :style="navigateStyle">
					<van-icon size="22" name="arrow-left" class="head_back_icon" />
				</div>
			</div>
		</div>
		<div v-if="isFixed" :style="'height:' + customBar + 'px;'"></div>
	</div>
</template>
<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from "vuex";
	export default {
		name: "HeadCustom",
		props: {
			config: {
				type: Object,
				default: () => {},
			},
			isFixed: {
				type: Boolean,
				default: false,
			},
			isBack: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {
				scrollTop: false,
				statusBar: 0,
				custom: 0,
				customBar: 0,
				opacity: 0,
			};
		},
		computed: {
			headFixedStyle() {
				let opacity = this.isFixed ? 1 : this.opacity;
				if (this.config) {
					let background = this.config.backgroundColor;
					if (this.config.backgroundImage) {
						background = `url(${this.config.backgroundImage})`;
					}
					return `height:${this.customBar}px;color:${this.config.fontColor};background:${background};background-color:${this.config.backgroundColor};opacity:${opacity}`;
				} else {
					return `height:${this.customBar}px;background:#ffffff;`;
				}
			},
			navigateStyle() {
				let fontColor = "";
				if (this.config) {
					fontColor = this.config.fontColor;
				}
				return `padding-top:${
        this.customBar - this.custom.height
      }px;color:${fontColor}`;
			},
			headScrollStyle() {
				return `height:${this.customBar}px;background-color:rgba(255, 255, 255,${this.opacity});`;
			},
			headTitle() {
				if (this.config) {
					return this.config.pageTitle;
				} else {
					return "";
				}
			},
		},
		created(){
			let that = this;
			this.scrollTop = false;
			//获取状态栏的高度
			wx.getSystemInfo({
				success: function(e) {
					that.statusBar = e.statusBarHeight;
					let capsule = wx.getMenuButtonBoundingClientRect();
					if (capsule) {
						that.custom = capsule;
						that.customBar = capsule.bottom + capsule.top - e.statusBarHeight;
					} else {
						that.customBar = e.statusBarHeight + 50;
					}
					let navBarStyle = {
						statusBar: that.statusBar,
						custom: that.custom,
						customBar: that.customBar,
					};
					// 使用vuex存放状态栏样式
					that.setNavBarStyle(navBarStyle);
					// console.log(e, capsule, "that.customBar");
				},
			});
		},
		// 监听页面滚动
		onPageScroll(e) {
			this.scrollTop = e.scrollTop > 20 ? true : false;
			// 导航栏背景渐变
			if (e.scrollTop < 400) {
				this.opacity = e.scrollTop / (e.scrollTop + 43.88);
			} else {
				this.opacity = 1;
			}
		},
		methods: {
			...mapMutations(["setNavBarStyle"]),
			// 返回上一页
			goBack() {
				let that = this;
				wx.navigateBack({
					fail(err) {
						wx.reLaunch({
							url: "/pages/Loading/index",
						});
					},
				});
			},
			// 返回首页
			goHome() {
				wx.navigateTo({
					url: "/pages/launch/main?type=index",
				});
			},
		},
	};
</script>
<style lang="less" scoped>
	.head_mian {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;

		.head_fixed {
			width: 100%;
			position: relative;
			background-size: cover !important;
			background-repeat: no-repeat;

			.head_fixed_left {
				position: absolute;
				left: 20rpx;

				img {
					width: 50rpx;
					height: 50rpx;
				}
			}

			.head_back_left {
				position: absolute;
				bottom: 10rpx;
				left: 20rpx;
			}

			.head_fixed_title {
				text-align: center;
			}
		}

		.head_top_mian {
			position: absolute;
			width: 100%;
			height: 100%;
			text-align: center;

			.head_top {
				position: absolute;
				bottom: 15rpx;
				left: 20rpx;
				// width: 120rpx;
				height: 48rpx;
				line-height: 48rpx;
				// padding: 8rpx 30rpx;
				border-radius: 48rpx;
				// background-color: rgba(111, 167, 241, 0.4);
				// color: #ffffff;
				// display: flex;
				// justify-content: space-between;
			}
		}

		.head_bg {
			position: relative;
			box-shadow: 0 0 3px #dbdbdb;
			background-size: cover !important;

			.head_back {
				text-align: center;

				.head_back_icon {
					position: absolute;
					left: 20rpx;
					font-weight: bold;
				}
			}
		}
	}
</style>
